METHOD AND SYSTEM FOR MAINTAINING SCROLL POSITION IN A WEB USER 

INTERFACE 



DESCRIPTION 



BACKGROUND OF INVENTION 

[Para 1] The present invention relates to web user interfaces and more 
particularly to a method and system for maintaining scroll position in a web 
user interface or the like. 

[Para 2] Web based user interfaces commonly suffer from a usability issue 
related to scrolling. The issue is that a browser's scrollbar position is lost 
when a hypertext mark-up language (HTML) or similar language page is 
reloaded via an automated refresh, when a user or operator activates or clicks 
on a hyperlink or a similar operation that may cause a change in the page. 
This forces the user to manually scroll the resulting HTML page back to the 
location or scroll position of interest after the page has reloaded. Figures 1A 
and 1 B are an example of an HTML page 1 00 that is reloaded. In Figure 1 A, 
the HTML page 1 00 has been by scrolled by a user or operator to a selected 
scroll position 1 02 in a web user interface 1 04 presentable by a browser (not 
shown). The HTML page 1 00 may be scroll to the selected scroll position 1 02 
by moving a vertical slider 1 06 in a vertical scroll bar 1 08 and a horizontal 
slider 1 1 0 in a horizontal scroll bar 1 1 2. The HTML page 1 00 may be scrolled 
to the selected position 1 02 to display an artifact 1 14 or a selected portion of 
the page 1 00 of interest substantially completely within the web user interface 
1 04. If the page 1 00 is reloaded or refreshed for any reason, the page 1 00 
may not be scrolled or positioned in the selected scroll position 1 02 after the 
reload or refresh event and the artifact 1 14 or selected portion of the page 
1 00 may not be completely viewable by the user as shown in Figure 1 B. 
Having to manually re-scroll the page 1 00 to substantially completely view the 
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artifact 1 1 4 or page portion of interest after each refresh event or similar event 
can be aggravating and time consuming. 

[Para 3] A current solution to the scrolling issue is for application developers 
to add named anchor points to their HTML Using this technique, anchor 
elements, e.g., <A href="#namel ">, may be added at predetermined locations 
in the HTML page. When the page is reloaded, the browser automatically 
positions the page at one of the named anchor points. One shortcoming of 
this named anchor point approach is that the anchor elements can only be 
positioned at certain predetermined points in the HTML document or page, 
and therefore cannot always scroll the user back to the exact spot where the 
user may have positioned or scrolled the HTML page before the reload 
occurred. This can result in the page appearing to "jump" between reloads, 
which can also be aggravating or tiresome to the user. 

[Para 4] Another shortcoming of the named anchor approach is that the user 
may manually scroll the page to a position that differs from a location 
anticipated by the developer when creating the named anchor. For example, 
the developer may expect the user to always be focused on a certain location 
in the page, such as an event viewer or the like, and the developer will create a 
universal resource locator (URL) for the page reload which references the 
named anchor at that spot or location. However, a user may want to set the 
scroll position at some other location but does not have the flexibility under 
the named anchor approach. 

SUMMARY OF INVENTION 

[Para 5] In accordance with an embodiment of the present invention, a 
method for maintaining scroll position in a web user interface may include 
translating a selected scroll position in the web user interface to a pair of scroll 
coordinates in response to operation of a set scroll position function. The 
method may also include advancing the web user interface to the selected 
scroll position in response to each occurrence of an event, such as opening, 
reloading or refreshing the web user interface, operating a hyperlink in the 
web user interface or similar event or operation. 

Page 2 of 32 



[Para 6] In accordance with another embodiment of the present invention, a 
method for maintaining scroll position in a web user interface may include 
receiving a browser request for a URL associated with the web user interface or 
web page. The method may also include generating a script for resetting a 
browser to a preset scroll position in response to the browser request 
containing a pair of scroll coordinates and adding the script to a response to 
the browser request. The method may further include automatically scrolling 
the browser to the preset scroll position in response to the script. 

[Para 7] In accordance with another embodiment of the present invention, a 
system for maintaining scroll position in a web user interface may include a 
processor and a set scroll position function operable on the processor. The 
set scroll position function may include a data structure to translate a selected 
scroll position in the web user interface to a pair of scroll coordinates in 
response to operation of the set scroll position function. The set scroll 
position function may also include a data structure to advance the web user 
interface to the selected scroll position in response to each occurrence of an 
event that may include at least one of opening, reloading or refreshing the web 
user interface or operation of a hyperlink in the web user interface. 

[Para 8] In accordance with another embodiment of the present invention, a 
system for maintaining scroll position in a web user interface may include a 
server and a data structure operable on the server to receive a browser request 
for a URL associated with the web user interface. The system may also include 
a data structure operable on the server to generate a script for resetting a 
browser to a preset scroll position in response to the browser request 
containing a pair of scroll coordinates. The system may also include a data 
structure operable on the server to add the script to a response to the browser 
request. 

[Para 9] In accordance with another embodiment of the present invention, a 
method of making a system for maintaining scroll position in a web user 
interface may include providing a processor and providing a set scroll position 
function operable on the processor. Providing the set scroll position function 
may include providing a data structure to translate a selected scroll position in 
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the web user interface to a pair of scroll coordinates in response to operation 
of the set scroll position function. Providing the set scroll position function 
may also include providing a data structure to advance the web user interface 
to the selected scroll position in response to each occurrence of an event that 
may include at least one of opening, reloading or refreshing the web user 
interface or operation of a hyperlink in the web user interface. 

[Para 1 0] In accordance with another embodiment of the present invention, a 
web user interface may include a scroll feature to scroll the web user interface 
to a selected position in at least a horizontal or a vertical direction. The web 
user interface may also include a set scroll position feature displayable in the 
web user interface to set or lock the selected scroll position. 

[Para 11] In accordance with another embodiment of the present invention, a 
computer-readable medium having computer-executable instructions for 
performing a method that may include translating a selected scroll position in 
the web user interface to a pair of scroll coordinates in response to operation 
of a set scroll position function. The method may also include advancing the 
web user interface to the selected scroll position in response to each 
occurrence of an event including at least one of opening, reloading or 
refreshing the web user interface or operating a hyperlink in the web user 
interface. 

DESCRIPTION OF DRAWINGS 

[Para 1 2] Figures 1 A and 1 B illustrate an example of a prior art web user 
interface or web page that is refreshed or reloaded after scrolling the interface 
to a selected scroll position. 

[Para 1 3] Figure 2 is a flow chart of an exemplary method for maintaining 
position in a web user interface in accordance with an embodiment of the 
present invention. 

[Para 1 4] Figure 3 is an example of a web user interface including a set scroll 
position feature in accordance with an embodiment of the present invention. 
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[Para 1 5] Figure 4 is an example of a web user interface including a set scroll 
position feature or function in accordance with another embodiment of the 
present invention. 

[Para 1 6] Figures 5A and 5B are each an example of a web user interface 
including a set scroll position feature in accordance with a further embodiment 
of the present invention. 

[Para 1 7] Figure 6 is a flow chart of an exemplary method for maintaining 
position in a web user interface in accordance with another embodiment of the 
present invention. 

[Para 1 8] Figure 7 is an example of a system for maintaining scroll position in 
a web user interface in accordance with an embodiment of the present 
invention. 

DETAILED DESCRIPTION 

[Para 1 9] The following detailed description of preferred embodiments refers 
to the accompanying drawings, which illustrate specific embodiments of the 
invention. Other embodiments having different structures and operations do 
not depart from the scope of the present invention. 

[Para 20] Figure 2 is a flow chart of an exemplary method 200 for maintaining 
position in a web user interface in accordance with an embodiment of the 
present invention. The web user interface may be an HTML page, portlet, 
portal or the like. In block 202, a vertical scroll position, a horizontal scroll 
position or both scroll positions of the web user interface may be adjusted. 
Each of the scroll positions may be adjusted using a slider in a scrollbar similar 
to that described with respect to Figures 1 A and 1 B. The slider may be clicked 
on and dragged using a computer pointing device, such as a mouse or the like, 
to move the web interface to a selected or preset position by a user. 
Alternatively, an arrowhead 1 1 6 (Figures 1 A and 1 B) at each end of the 
scrollbars 1 08 and 1 1 2 may be activated or clicked on by the computer 
pointing device to position the web user interface at the desired, selected or 
preset position. 
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[Para 21] In block 204, a set scroll position function may be operated to set at 
least one of the vertical and horizontal scrollbar positions. The set scroll 
position function may be operated by activating or operating a set scroll 
position feature that may be presented in the web user interface. Referring 
also to Figure 3, Figure 3 illustrates an example of a web user interface 300 
including a set scroll position feature 302 in accordance with an embodiment 
of the present invention. In the web user interface 300, the set scroll position 
feature 302 may include a "Maintain Position" option 304 presentable in a 
context menu 306. The context menu 306 may be presented or displayed in 
response to performing a right click action or similar operation on a scrollbar 
308 of the web interface 300 using a computer pointing device or the like. 
Once the web interface 300 has been scrolled using a browser to a desired or 
selected scroll position using the scrollbar 308, the context menu 306 may be 
presented by right clicking the scrollbar 308 using the pointing device. The 
"Maintain Position" option 304 may then be selected from the context menu 
306 to maintain or lock the exact or precise scroll position of the web user 
interface 300. The web user interface 300 or page may then return or re- 
scroll to the precise or exact, selected scroll position in response to each 
event, such as opening, reloading or refreshing the web user interface 300 or 
operating a hyperlink in the web user interface 300 or any other event that 
may affect the scroll position without the set scroll position function or feature 
302 of the present invention being activated. 

[Para 22] In another embodiment of the present invention illustrated in Figure 
4, a web user interface 400 may have a set scroll position feature 402 that 
includes a "Set Position" option 404 or the like in a context menu 406 that may 
operate similar to the "Maintain Position" option 302 in Figure 3. In this 
embodiment of the present invention, a vertical scroll position may be selected 
using a vertical scrollbar 406 and a horizontal scroll position may be selected 
using a horizontal scroll bar 408. The vertical scroll position or horizontal 
scroll position or both may be set in response to operation of the set scroll 
position feature 402. 
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[Para 23] In another embodiment of the present invention, either one of the 
vertical or horizontal scroll positions may be set similar to that described 
above. The other of the vertical or horizontal scroll positions may then be 
automatically set in response to setting the one scroll position. In this 
manner, the vertical and horizontal scroll positions do not have to each be 
individually set but one operation sets both scroll positions. 

[Para 24] Figures 5A and 5B are an example of a web user interface 500 
including a set scroll position feature 502 in accordance with a further 
embodiment of the present invention. In web user interface 500, a selected 
scroll position may be set or locked in response to operating a button 504 or 
the like. The button 504 may be a floating button. The button 504 may be 
labeled "LOCK SCROLL?" or other appropriate label that illustrates the function 
of the button 504. Operating or clicking on the button 504 may have a similar 
effect as selecting "Maintain Position" option 304 in Figure 3 or the "Set 
Position" option 404 in Figure 4. Accordingly, a vertical scroll bar 506 and a 
horizontal scrollbar 508 may be adjusted to position the web user interface 
500 at a selected or desired scroll position using a computer pointing device 
or the like. The "Lock Scroll?" button 504 may then be operated using the 
pointing device to set or lock the selected scroll positions. After operating the 
button 504 to set or lock the scroll positions, the button 504 may change to a 
button 510 that may be labeled "Unlock Scroll?" or other appropriate label to 
illustrate the function of the button 510. The scroll positions may be unlocked 
in response to operating the "Unlock Scroll?" button 51 0 to permit the scroll 
positions to be readjusted by the user. Similarly, the options 304 and 404 may 
change to permit the user to unset or free the scroll positions for 
readjustment. 

[Para 25] The web user interfaces 400 and 500 in Figures 4, 5A and 5B, 
respectively, may be a portal environment including a plurality of portlets. A 
portlet may have a "THIS PORTLET" option or button 41 0 or 51 2. The "THIS 
PORTLET" option 41 0 or 51 2 may be operated or selected in a particular 
portlet to implement the present invention with respect to that portlet. The 
particular portlet may then be automatically scrolled into view each the portal 
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or portlet environment associated with the portlet is accessed or entered. The 
set scroll position feature may be useful in the portlet environment because in 
a work page concept a user often opens new portlets and/or closes existing 
portlets. As a side benefit, the set scroll feature of the present invention does 
not require the user to make any selections or gestures inside any particular 
form or portlet to set the scroll position. 

[Para 26] Referring back to Figure 2, in block 206, the selected scroll 
positions may be translated into a pair of X and Y coordinates in response to 
operating the set position function. A script, such as a JavaScript or the like, 
may be added to a web user interface or page to obtain a current scroll 
position when set by a user or in response to operation of the set position 
function. The script may translate the desired or selected scroll position into 
the X and Y coordinates. An example of a JavaScript for translating the 
selected scroll position into the X and Y coordinates may be as followings: 

<script> 

var x=document.body.scrolll_eft; 
var y=document.body.scrollTop; 
</script> 

[Para 27] In block 208, the X and Y coordinates may be appended to a URL 
corresponding to the web user interface or page in response to the URL being 
requested by an application server or the like. The pair of X and Y coordinates 
may be stored in association with the URL for the associated web user interface 
or web page. 

[Para 28] The script or JavaScript may be used to listen for an unload event or 
onUnload event that may be triggered in response to a browser unloading the 
web user interface or page. The script may translate the selected scroll 
position to the X and Y scroll coordinates in response to detecting or hearing 
the unload event. An example of a script or code to listen for the unload event 
and to append the x and Y coordinates to the URL is as follows: 

<script> 

document. onunload=appendXY(); 
function appendXY(){ 
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//append the X and Y 
//coordinates to the URL 
} 

</script> 

[Para 29] Figure 6 is a flow chart of an exemplary method 600 for maintaining 
position in a web user interface in accordance with another embodiment of the 
present invention. In block 602, a browser request may be received for a URL 
associated with a web user interface or page. The browser request may be 
received by a server, such as an application server or the like. In block 604, a 
response to the browser request in HTML or the like may be generated. In 
block 606, a determination may be made whether the browser request 
contains a pair of scroll coordinates. If the browser request does not contain a 
pair of scroll coordinates, the method 600 may advance to block 608. In block 
608, the response may be sent to the browser. If the browser request does 
contain a pair of coordinates in decision block 606, the method 600 may 
advance to block 61 0. In block 61 0, a script for resetting the browser or web 
user interface to a preset or selected scroll position may be generated. In 
block 61 2, the script for resetting the scroll position may be added to the 
response. In block 608, the response including the appended script may be 
sent to the browser. The browser or web user interface may automatically be 
scrolled exactly or precisely to the preset or selected scroll position in 
response to the script. 

[Para 30] Figure 7 is an example of a system 700 for maintaining scroll 
position in a web user interface in accordance with an embodiment of the 
present invention. Elements of the methods 200 and 600 of Figures 2 and 6 
respectively may be embodied in the system 700. Additionally, data structures 
or code to form web user interfaces or pages 300, 400 and 500 of Figures 3, 
4, 5A and 5B, respectively, may also be embodied in system 700. The system 
700 may include a server 702. The server 702 may be an application server, 
portal server or other server accessible via a network 704 or medium by one or 
more users or clients 706. The server 702 may provide common services, 
such as application connectivity, integration, administration, and presentation 
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capabilities that may be needed across the system 700 or a portal 
environment. 

[Para 31] The network 704 may be any network or medium including byway 
of example, dedicated communication lines, telephone networks, and wireless 
data transmission systems, two-way cable systems, and customized computer 
networks, interactive kiosk networks, a private network or intranet, the 
Internet or the like. 

[Para 32] The server 702 may include a server processor 708 and an 
operating system 71 0 operable on the server processor 708 to manage basic 
operations of the server 702 and to utilize other applications to perform 
different functions or specific operations associated with the server 702. The 
server 702 may also include data structures 71 2 or code to form web user 
interfaces, such as web user interfaces 300, 400 and 500 of Figures 3, 4, 5A 
and 5B. The server 702 may also include a maintain scroll position function 
71 4. The data structures 71 2 and 71 4 may reside in a storage device 71 6 to 
be accessed or called when needed by the server processor 708 or operating 
system 710. Alternatively, the data structures 712 and 714 may reside on the 
server processor 708. 

[Para 33] Data structures to perform operations or functions similar to those 
described with respect to method 600 of Figure 6 may operate on the server 
702 and may be embodied in the maintain scroll position function 714. A data 
structure may be operable on the server 702 to receive a browser request from 
the user or client 706. Another data structure operable on the server 702 may 
generate a script for resetting a browser 71 8 of the user or client 706 to a 
preset scroll position in response to the browser request including a pair of 
scroll coordinates. A further data structure that may be operable on the server 
702 may add the script to a response to the browser request. The browser 
71 6 may then automatically scroll to the preset scroll position in response to 
the script appended to the response. 

[Para 34] Each user or client 706 may include a client processor 720. An 
operating system 722 may operate on the client processor 720 to control 
overall operation of the user or client 706. The user or client 706 may be a 
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desktop or mobile computer system, cellular phone, personal digital assistant 
or the like. The browser 71 8 or Internet browser may operate on the client 
processor 720 to facilitate accessing the server 702 and transmitting browser 
requests to the server 702, as previously discussed. A scroll function 724 may 
be operable on the browser 71 8. The scroll function 724 may facilitate a user 
manually adjusting a vertical scroll position, horizontal scroll position or both 
of a web user interface or web page. The scroll positions may be adjusted 
using scrollbars or like means, similar to that described with respect to web 
user interfaces 300, 400 and 500 of Figures 3, 4, 5A and 5B and method 200 
of Figure 2. 

[Para 35] A set scroll position function 726 may also be operable on the client 
processor 720 or browser 71 8. The set scroll position function 726 may be 
operated to set either a vertical scroll position, horizontal scroll position or 
both. The set scroll position function 726 may operate similar to that 
described with respect to method 200 in response to activating or operating a 
set scroll position feature or icon associated with a web user interface, such as 
interfaces 300, 400 and 500 of Figures 3, 4, 5A and 5B, respectively. The set 
scroll position function 726 may include a data structure to translate a 
selected or preset scroll position in a web user interface to a pair of scroll 
coordinates in response to operation of the set scroll position feature, icon or 
button. The set scroll position function 726 may also include a data structure 
to advance the web user interface to the selected or preset scroll position in 
response to each occurrence of an event that may include at least one of 
opening, reloading, or refreshing the web user interface or page, operation of 
a hyperlink in the web user interface or other event or action that may affect 
the scroll position of the web user interface if not set or locked to the selected 
or preset position. 

[Para 36] The set scroll position function 726 may include a script, such as a 
JavaScript or the like, that may listen for an onUnload () event or unload event 
which may be triggered whenever the browser 71 8 is unloading a current 
page. The script may translate a user's desired or selected scroll position into 
a pair of X and Y coordinates. The pair of coordinates may be appended to a 
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URL associated with a web user interface or page whenever the web user 
interface or page may be requested from the server 702. Similar to that 
previously described, when the server 702 receives the browser request and 
finds the X and Y coordinates appended to the request URL, the server 702 or 
maintain scroll position function 714 operating on the server 702 may 
generate a JavaScript or the like and add or append the JavaScript to the 
response. The JavaScript added to the response causes the browser to 
automatically scroll to the exact same scroll position selected or preset by the 
user 706, similar to that described with respect to method 600 of Figure 6. 

[Para 37] Each user or client 706 may include a plurality of input/output (I/O) 
devices 728. The I/O devices 728 may be input and output devices or 
combination input and output devices. The I/O devices 728 permit a user to 
control operation and interface with the client processor 720. The I/O devices 
728 also permit a user to control operation of the scroll function 724 and set 
scroll position function 726, as well as other programs or applications that 
may be operable on the client processor 720 or accessible by the client 
processor 720. The I/O devices 728 may include a display or monitor to 
display web user interfaces or web pages. The I/O devices 728 may also 
include a keyboard and computer pointing device or the like to control 
operation of the scroll function 724 and set scroll position function 726 and 
other programs or applications. The I/O devices 728 may further include disk 
drives, optical, mechanical, magnetic, or infrared input/output devices, 
modems or the like. The I/O devices 728 may be used to access a medium 
730. The medium 730 may contain, store, communicate or transport 
computer-readable or computer-executable instructions or other information 
for use by or in conjunction with a system, such as the system 700 or 
user/client system 706. 

[Para 38] Each user or client 706 may also include a storage device 732 to 
store application programs and data that may be used by the application 
programs, such as the set scroll position function or program 726 or other 
programs. 
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[Para 39] Multiple input/output (I/O) devices 734 may be associated with the 
server 702. The I/O devices 734 may be similar to I/O devices 728. The I/O 
devices 734 permit a user or administrator to operate and interface with the 
server 702 and to control operation of applications operating on the server 
702, such as the data structures to form the web user interfaces 71 2, the 
maintain scroll position function 714 and other applications. The I/O devices 
734 may also be used to access a medium 736. The medium 736 may contain, 
store, communicate or transport computer-readable or computer executable 
instructions or other information for use by or in connection with a system, 
such as the server 702 or system 700. 

[Para 40] Elements of the present invention, such as methods 200 and 600 of 
Figures 2 and 6 respectively, web user interfaces 300, 400 and 500 of Figures 
3, 4, 5A and 5B, respectively, and system 700 of Figure 7, may be embodied in 
hardware and/or software as a computer program code that may include 
firmware, resident software, microcode or the like. Additionally, elements of 
the invention may take the form of a computer program product on a 
computer-usable or computer-readable storage medium having computer- 
usable or computer-readable program code embodied in a medium for use by 
or in connection with a system, such as system 700 of Figure 7. Examples of 
such a medium may be illustrated in Figure 7 as I/O devices 728 and 734 or 
medium 730 and 736. A computer-usable or readable medium may be any 
medium that may contain, store, communicate or transport the program for 
use by or in connection with a system. The medium, for example, may be an 
electronic, magnetic, optical, electromagnetic, infrared or semiconductor 
system or the like. The medium may also be simply a stream of information 
being retrieved when the computer program product is "downloaded" through 
a network, such as the Internet or the like. The computer-usable or readable 
medium could also be paper or another suitable medium upon which the 
program may be printed. 

[Para 41] Although specific embodiments have been illustrated and described 
herein, those of ordinary skill in the art appreciate that any arrangement which 
is calculated to achieve the same purpose may be substituted for the specific 
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embodiments shown and that the invention has other applications in other 
environments. This application is intended to cover any adaptations or 
variations of the present invention. The following claims are in no way 
intended to limit the scope of the invention to the specific embodiments 
described herein. 
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